<template>
  <div>
     
    <!-- 视频 -->
    <div class="player-wrap">
        <video src="../assets/img/qc.mp4" controls poster="../assets/img/timg.jpg"></video>
    </div>

    <!-- 热度 -->
    <div class="items-full">
        <van-cell title="青春创世纪" is-link  />
        <div class="videoInfoFold-data">
          <div class="data-item">
            <i></i>
            <span>热度2955</span>
          </div>
          <div class="data-center">
            <span class="info-updata">· 更新46集</span>
            <span class="info-sorce">· 8.6分</span>
          </div>
          <div class="data-comment">
              <i></i>
              <span>3569条评论</span>
          </div>
        </div>
    </div>
    <!-- 下载 -->
    <div class="m-extendBar">
        <div class="toolBar-item">
          <i class="item1"></i>
          <span>超清</span>
        </div>
        <div class="toolBar-item">
          <i class="item2"></i>
          <span>下载</span>
        </div>
        <div class="toolBar-item">
          <i class="item3"></i>
          <span>分享</span>
        </div>
        <div class="toolBar-item">
          <i class="item4"></i>
          <span>更多</span>
        </div>
    </div>
    <van-divider />
    <!-- 分集 -->
    <div class="albumList">
        <div class="box-items">
          <h3>选集</h3>
          <span>11月9日起每周—12:00更新2集;VIP会员抢先看全集</span>
          <van-icon name="arrow" class="icon"/>
        </div>
        <div class="items-full">
           <swiper ref="mySwiper" :options="swiperOptions" class="selecteds">
              <swiper-slide class="selected" v-for="(item,index) in setarr" :key="index.id">{{item.value}}</swiper-slide>
            </swiper>
        </div>
    </div>
   
  </div>
</template>


<script>
  export default {
  name: 'Telev',
  props: {
    msg: String
  },
  data() {
    return {
          swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          slidesPerView : 6,
          spaceBetween : 6,
        },
        setarr:[]
    }
  },
   computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.$axios.get("/api/televsetarr").then(data => {
          var televsetarr = data.data;
          this.setarr = televsetarr
      })
    }
}

</script>

<style scoped>

    /* 搜索栏 */
.header-only {
  box-sizing: border-box;
  height: 0.44rem;
  background: #191919;
  padding: 0.08rem 0 0 0.11rem;
}
.header-onlyleft {
  float: left;
  width: 1.08rem;
  height: 0.26rem;
  background: url(../assets/img/aqy.png) no-repeat;
  background-size: 0.8rem 0.26rem;
}
.header-onlyright {
  float: right;
  color: #b0b0b0;
}
.header-onlyright i {
  display: inline-block;
  width: 0.44rem;
  height: 0.3rem;
  font-size: 0.25rem;
}
.header-onlyright span {
  position: relative;
  top: -0.06rem;
  right: 0.07rem;
  font-size: 0.14rem;
}
/* 视频 */
.player-wrap {
  width: 3.75rem;
  height: 2.1rem;
  margin-bottom: .20rem;
}
.player-wrap video {
  width: 100%;
  
}
/* 要求 */
.iqylink-guidg {
  margin: 0.15rem 0.12rem 0.15rem 0.12rem;
  width: 3.61rem;
  height: 0.36rem;
} 
.iqylink-guidg img {
  width: 100%;
  height: 100%;
  transform: translateX(-0.04rem); 
  }
  /* 热度 */
.items-full >>>.van-cell__title span {
  font-size: .18rem;
  font-weight: 700;
  line-height: .23rem;
}
.videoInfoFold-data {
    line-height: .27rem;
    color: #999;
    font-size: .13rem;
    padding-top: .05rem;
    height: .32rem;
    box-sizing: border-box;
    display: block;
}
.data-item {
  float: left;
}
.data-item i {
  display: inline-block;
  margin-left: 0.14rem;
  width: .15rem;
  height: .15rem;
  background: url(../assets/img/tvbj002.png) no-repeat -0.28rem 0;
  background-size: 0.42rem 0.14rem;
  transform: translateY(0.03rem);
}
.data-center {
  float: left;
  margin-left: 0.05rem;
}
.info-sorce {
  margin-left: 0.05rem;
}
.data-comment {
  float: right;
  font-size: .1rem;
  line-height: 0.24rem;
  color: #333;
  max-width: .9rem;
  background-color: #f0f0f0;
  border-radius: .16rem;
  transform: translateX(-0.17rem);
}
.data-comment i {
  display: inline-block;
  width: .1rem;
  height: .1rem;
  background: url(../assets/img/tvbg003.png) no-repeat -0.01rem -1.13rem;
  background-size: 2.01rem auto;
}
/* 下载 */
.m-extendBar {
  margin: 0.26rem 0;
  height: 0.45rem;
  display: flex;
}
.toolBar-item {
  width: 24%;
  text-align: center;
  
}
.toolBar-item i {
  display: inline-block;
  width: 0.24rem;
  height: 0.24rem;
  background-image: url(../assets/img/tvbg003.png) ;
  background-size: 2.01rem auto;
  background-repeat: no-repeat;
}
.toolBar-item span {
  display: block;
}
.item1 {
  background-position: -1.495rem -0.1rem;
}
.item2 {
  background-position: 0 -0.34rem;
}
.item3 {
  background-position: 0 -0.1rem;
}
.item4 {
  background-position: -0.48rem -0.1rem;
}

/* 分集 */

.box-items {
  padding: .07rem .12rem;
  box-sizing: border-box;
  font-size: .15rem;
}
.box-items h3 {
  display: inline-block;
  font-size: .15rem;
  line-height: .35rem;
}
.box-items  span {
    display: inline-block;
    font-size: .12rem;
    color: #999;
    text-align: right;
    height: .3rem;
    max-width: 81%;
    padding-right: .06rem;
    margin-left: 0.16rem;
}
.icon {
  transform: translateY(0.03rem);
}
.items-full {
  height: 68px;
}
.selecteds {
  padding-right: .09rem;
  padding-left: .08rem;
  color: #333;
}
.selected {
  margin-right: 0px ;
  width: .53rem;
  height: .53rem;
  background:  #f0f0f0;
  font-size: .15rem;
  line-height: .53rem;
  text-align: center;
  font-weight: bold;
}
</style>